<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style media="screen">
      * {
        margin: 0;
        padding: 0;
        /*border: 1px solid red;*/
      }
      .wrap {
        width: 100vw;
        height: 100vh;
        background: url(img/sky.gif) no-repeat;
        background-size: 100% 100%;
        padding-top: 50px;
      }
      ol {
        width: 100%;
      }
      ol li {
        list-style: none;
        margin-top: 20px;
        font-size: 20px;
        text-align: center;
        display: none;
      }
      .begin {
        width: 100%;
        text-align: center;
        margin-top: 30px;
        background: url(img/shandian.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        display: none;
      }
      .go_in {
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -25px;
        font-size: 50px;
      }
      }
    </style>
  </head>
  <body id="body">
    <div class="wrap">
      <ol>
        <li>手机空，</li>
        <li>没钱充，</li>
        <li>生活所逼不轻松；</li>
      </ol>
      <ol>
        <li>天苍苍，</li>
        <li>野茫茫，</li>
        <li>学校食堂有蟑螂。</li>
        <li>我们</li>
        <li></li>
      </ol>
      <audio src="img/shandian.mp3" id="shandian">

      </audio>
      <audio src="img/jianpan.mp3" id="jianpan">

      </audio>
      <a class="begin" href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9bdc780b9673cf2e&redirect_uri=http://1.happyer.applinzi.com/one.php&response_type=code&scope=snsapi_base&state=neihoua#wechat_redirect">
        <img src="img/logo_right.png" alt="" />
        <div class="go_in">
          >
        </div>
      </a>
    </div>
  </body>
  <script src="js/jquery-3.1.0.js" charset="utf-8"></script>
  <script type="text/javascript">
    //写一个进入按钮的<颜色随机变化的函数
    function colorRandom() {
      var go_in = $(".go_in")[0];
      var a = Math.floor(Math.random()*256);
      var b = Math.floor(Math.random()*256);
      var c = Math.floor(Math.random()*256);
      go_in.style.color = "rgb(" + a + "," + b + "," + c + ")";
    }
    // 调用这个函数
    setInterval("colorRandom()",100)
    // 写一个 ol的变化的函数
    var liArray = $("li");
    var i = 0;
    function liChange() {
        liArray[i].style.display = "block";
        var jianpan = document.getElementById("jianpan");
        jianpan.play();
        i++;
        if ( i == "8") {
          console.log("a");
          $(".begin")[0].style.display = "block";
          var shandian = document.getElementById("shandian");
          shandian.play();
          clearInterval(timer);
        }
      }
    // 执行上面的函数
    var timer = setInterval("liChange()",2000);



  </script>
</html>
